<template>
    <div class="Box">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>登录</span>
            </div>
            <el-form
                :model="user"
                :rules="rules"
                ref="ruleForm"
                label-width="50px"
                class="demo-ruleForm"
            >
                <el-form-item label="账号" prop="account">
                    <el-input v-model="user.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        v-model="user.password"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login()"
                        >登录</el-button
                    >
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                account: "zhangsan",
                password: "123456",
            },
            rules: {
                account: [
                    {
                        required: true,
                        message: "请正确输入",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请正确输入",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },

    methods: {
        async login() {
            const data = await this.$api.users.login(this.user);
            console.log(data);
            if (data.code === 200) {
                localStorage.token = data.token;
                this.$message({
                    message: "登陆成功",
                    type: "success",
                });
                this.$router.push('/index/users')
            } else {
                this.$message.error("账号或密码错误，登陆失败");
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style scoped>
.Box {
    /* border: 1px solid pink; */
    /* background-color: pink; */
    padding: 50px;
    width: 300px;
    height: 300px;
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>